<template>
  <div class="w-full my-14px box-border flex flex-row items-center">
    <img
      :src="data?.header_img"
      alt=""
      class="w-42px h-42px rounded-50% cursor-pointer"
      @click="handelClick(data?.user_id)"
    />
    <div class="ml-10px flex-1 flex flex-col cursor-pointer">
      <div class="mt-4px h-14px leading-14px text-14px text-#333333">{{ data?.nick_name }}</div>
      <div class="mt-6px h-14px leading-14px text-14px text-#333333 truncate">
        {{ data?.profile }}
      </div>
    </div>
    <button
      class="py-8px px-10px rounded-12px flex flex-row items-center bg-[#E4ECEF] cursor-pointer"
      @click="handleCancelFollow(data?.user_id)"
      v-if="isFollow"
    >
      <div class="text-12px text-#242633">{{ followText }}</div>
    </button>
    <button
      class="py-8px px-10px rounded-12px bg-#1CB3FF flex flex-row items-center cursor-pointer"
      @click="handleFollow(data?.user_id)"
      v-else
    >
      <div class="text-12px text-white">关注</div>
    </button>
  </div>
</template>
<script setup>
import { ref, watchEffect, computed } from 'vue'
import { useRouter } from 'vue-router'
import { followUser, cancelFollowUser } from '@/api/user'
import { Message } from '@arco-design/web-vue'
const router = useRouter()
const isFollow = ref(true)
const props = defineProps(['data'])
watchEffect(() => {
  isFollow.value = props.data.is_follow
})
const handleCancelFollow = (id) => {
  cancelFollowUser(id).then((res) => {
    isFollow.value = false
    Message.success('取消关注成功')
  })
}
const handleFollow = (id) => {
  followUser(id).then((res) => {
    isFollow.value = true
    Message.success('关注成功')
  })
}
const handelClick = (id) => {
  router.push({ name: 'User', params: { id } })
}
const followText = computed(() => {
  if (isFollow && props.data?.is_fans) {
    return '互相关注'
  } else {
    return '关注'
  }
})
</script>
<style lang="less" scoped></style>
